<template>
  <div style="display: flex;justify-content: center">
    <h1>采购入库</h1>
  </div>

  <div style="display: flex ;justify-content: space-around;margin-top: 20px">
    <div>
      供应商：
      <el-select v-model="supplierId" placeholder="请选择" size="large">
        <el-option v-for="s in supplier" :key="s.id" :label="s.name" :value="s.id"></el-option>
      </el-select>
    </div>
    <div>
      采购人：{{ loginUser.realName }}
    </div>
  </div>
  <div>
    采购物品：
    <el-table :data="buyerList" style="width: 100%;height: 200px">
      <el-table-column prop="product.name" label="商品名称"/>
      <el-table-column prop="product.brand" label="品牌"/>
      <el-table-column prop="money" label="采购价"/>
      <el-table-column prop="num" label="采购数量" width="200">
        <template #default="scope">
          <el-input v-model="scope.row.num" @blur="update(scope.row)" style=" width: 70px"/>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="移除商品" width="220">
        <template #default="scope">
          <el-button type="danger" @click="del(scope.row)">
            <el-icon><Scissor /></el-icon>移除商品</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div style="display: flex ;justify-content: space-around;margin-top: 40px">
    <div>
      <el-button type="success" @click="addVisible=true">添加商品<el-icon><WindPower /></el-icon></el-button>
    </div>
    <div>
      <el-button type="success" @click="warehousing()">入库<el-icon><WindPower /></el-icon></el-button>
    </div>
  </div>
  <!--  添加商品弹出框-->
  <el-dialog
      v-model="addVisible"
      title="添加采购商品"
      width="800px"
  >
    <el-form
        label-width="120px"
        class="demo-ruleForm"
        status-icon
        style="width: 400px;"
    >
      <div style="display: flex;justify-content: space-around;width: 600px;">

        <div>
          <el-form-item label="商品编号：" prop="name">
            <el-input v-model="addProductObj.id" @blur="findProduct(addProductObj.id)"/>
          </el-form-item>

          <el-form-item label="商品名称：" prop="phone">
            <span v-if="productObj!=''">{{ productObj.name }}</span>
            <el-input v-if="productObj==''" v-model="addProductObj.name"/>
          </el-form-item>
          <el-form-item label="品牌：" prop="money">
            <span v-if="productObj!=''">{{ productObj.brand }}</span>
            <el-input v-if="productObj==''" v-model="addProductObj.brand"/>
          </el-form-item>
          <el-form-item label="类别：" prop="money">
            <span v-if="productObj!=''">{{ productObj.type }}</span>
            <el-select v-if="productObj==''" v-model="addProductObj.type" placeholder="请选择" size="large">
              <el-option v-for="type in typeList" :label="type" :value="type"></el-option>
            </el-select>

          </el-form-item>
          <el-form-item label="采购价：" prop="money">
            <span v-if="productObj!=''">{{ productObj.buyPrice }}</span>
            <el-input v-if="productObj==''" v-model="addProductObj.buyPrice"/>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="图片：" prop="money">
            <img :src="'/project/emImg/'+productObj.imgPath"
                 id="faceImg" style="width: 126px;height: 126px">
            <input type="file" ref="faceFile" v-if="productObj==''" @change="fileChange()" style="margin-top: 10px">
          </el-form-item>

          <el-form-item label="采购数量：" prop="money">
            <el-input v-model="num"/>
          </el-form-item>
        </div>

      </div>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="addVisible = false">取消</el-button>
        <el-button type="primary" @click="add()">添加</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>


import axios from "axios";

export default {
  data() {
    return {
      loginUser: {},
      loginUserId: "",
      supplier: [],
      addVisible: false,
      supplierId: "",
      buyerList: [],
      addProductObj: {},
      productObjId: "",
      productObj: {},
      option: "",
      delObj: "",
      obj: {},
      num: '',
      typeList: [],
    }
  },
  methods: {
    findSupplierName() {
      axios.get("/project/supplier/findAll").then(resp => {
        this.supplier = resp.data
      })
    },
    async getLoginUser() {
      await axios.get("/project/user/getLoginUser").then(resp => {
        this.loginUser = resp.data;
      })
      this.findList();
    },
    findList() {
      axios.get("/project/buyerCar/findByUserId", {
        params: {
          userId: this.loginUser.id
        }
      }).then(resp => {
        this.buyerList = resp.data;
      })
    },
    findProduct(id) {
      axios.get("/project/product/findById", {
        params: {
          productId: id
        }
      }).then(resp => {
        this.productObj = resp.data
        if (this.productObj == "") {
          this.option = "add";
        } else {
          this.addProductObj = this.productObj
        }
      })
    },
    fileChange() {
      var reader = new FileReader();//定义文件读取流对象
      reader.readAsDataURL(this.$refs.faceFile.files[0]);
      reader.onload = function (ev) {
        document.getElementById("faceImg").src = ev.target.result;
      }
    },
    async add() {
      if (this.option == "add") {
        var obj = new FormData();
        obj.append("uploadImg", this.$refs.faceFile.files[0]);
        let config = {
          headers: {'Content-Type': 'multipart/form-data'}
        }
        var face = ""
        await axios.post("/project/upload", obj, config).then(resp => {
          face = resp.data;
        });
        this.addProductObj.imgPath = face;
      }

      axios.get("/project/buyerCar/add", {
        params: {
          option: this.option,
          id: this.addProductObj.id,
          name: this.addProductObj.name,
          brand: this.addProductObj.brand,
          type: this.addProductObj.type,
          imgPath: this.addProductObj.imgPath,
          buyPrice: this.addProductObj.buyPrice,
          sellPrice: this.addProductObj.sellPrice,
          unm: this.num,
          userId: this.loginUser.id
        }
      }).then(resp => {
        if (resp.data == "ok") {
          this.productObj = {};
          this.option = "";
          this.productObjId = "";
          this.addProductObj = {};
          this.addVisible = false;
          this.findList();

        }
      })
    },
    del(obj) {
      this.delObj = obj;
      axios.get("/project/buyerCar/del", {
        params: {
          buyerCarId: this.delObj.id
        }
      }).then(resp => {
        if (resp.data == "ok") {
          this.findList();
        }
      })
    },
    warehousing() {
      axios.get("/project/buyer/add", {
        params: {
          user: this.loginUser.realName,
          supplierId: this.supplierId,
          userId: this.loginUser.id
        }
      }).then(resp => {
        if (this.supplierId == null || this.supplierId == "") {
          alert("请选择供应商");
          return;
        }
        if (this.loginUser == null || this.loginUser == "") {
          alert("请先登录");
          return;
        }
        if (resp.data == "ok") {
          alert("添加成功");
        }
        this.findList();

      })
    },
    update(obj) {
      axios.get("/project/buyerCar/update", {
        params: {
          buyerCarId: obj.id,
          num: obj.num
        }
      }).then(resp => {
        if (resp.data == "ok") {
          alert("修改成功")
        }
      })
    },
    getType() {
      axios.get("/project/product/findType").then(resp => {
        this.typeList = resp.data;
      });
    }

  },
  created() {
    this.findSupplierName();
    this.getLoginUser();
    this.getType();
  }
}
</script>

<style scoped>

</style>